<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <div style="padding-bottom:10px;"><i class="fa fa-address-card"></i>  客户账户信息</div>
            <span>
                <el-input
                placeholder="请输入要查询的账户名"
                v-model="uName"
                clearable style="width:30%;float:left;margin-right:50px;">
                </el-input>
                <el-input
                placeholder="请输入要查询的账户身份证"
                v-model="uId"
                clearable style="width:30%;float:left;margin-right:20px;" maxlength="18" oninput = "value=value.replace(/[^\d]/g,'')">
                </el-input>
                </span>
            <el-button  style="float: left;" icon="el-icon-search" circle @click="getUserInfoByaccountUidAndName()"></el-button>
        </div>
        <div>
            <el-tabs type="border-card" v-show=visiable>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-date"></i> 账户基本信息</span>
                    
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item style="position:absolute;float:left;">
                            
                        </el-form-item> 
                        <el-form-item label="客户名" style="width:30%;postion:inherit;float:left !important;">
                            <el-input v-model="userInfo.uname"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证" style="width:30%;position:inherit;float:left !important;">
                            <el-input v-model="userInfo.uid" maxlength="18" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                        <el-form-item label="联系电话" style="width:30%;position:inherit;float:left !important;">
                            <el-input v-model="userInfo.utelephone" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" style="width:30%;position:inherit;clear:both;float:left !important;">
                            <el-radio-group v-model="userInfo.usex">
                                <el-radio :label="'1'">男</el-radio>
                                <el-radio :label="'0'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="联系电话" style="width:30%;position:inherit;float:left !important;">
                         <input type="text" v-model="userInfo.uhome" lay-verify="title" autocomplete="off" class="layui-input my_input form-control">
                        </el-form-item>
                        <!-- <el-form-item label="家庭地址" style="width:50%;position:inherit;clear:both;">
                                <!--省-->                                
                            <!-- <select style="width:30%;position:inherit;float:left !important;" id="province" v-model="provinceId" @change="getTwoAddressByParentId(provinceId,'1')" class="form-control">
                                <option v-for="province in provinces" v-bind:value="province.addressId">
                                    {{ province.cityName }}
                                </option>
                            </select>
                                <!--市-->
                            <!-- <select style="width:30%;position:inherit;float:left !important;" id="city" v-model="cityId" @change="getTwoAddressByParentId(cityId,'2')" class="form-control">
                                <option v-for="city in citys" v-bind:value="city.addressId">
                                    {{ city.cityName }}
                                </option>
                            </select>
                                <!--县-->
                            <!-- <select style="width:30%;position:inherit;float:left !important;" id="county" v-model="countyId" class="form-control">
                                <option v-for="county in countys" v-bind:value="county.addressId">
                                    {{ county.cityName }}
                                </option>
                            </select> --> 

                        <!-- </el-form-item> -->
                        
                        
                        </el-form>


                </el-tab-pane>
                <el-tab-pane label="已创建卡号">
                    <span slot="label"><i class="fa fa-table"></i> 已创建卡号</span>
               
                    
                    <el-table
                    :data="tableData"
                    style="width: 100%">
                        <el-table-column
                            prop="cardId"
                            label="卡号"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="cardLock"
                            label="状态"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="tcreateTime"
                            label="创建时间">
                        </el-table-column>
                    </el-table>     
                </el-tab-pane>
            </el-tabs>  
        </div>
    </el-card>
</template>
<script>
import Qs from 'qs'
export default {
    inject:['reload'],
    data () {
        return {
            uName:'',
            uId:'',
            userInfo:'',//客户基本信息
            visiable:false,//是否有客户信息
            uhome:'',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            provinceId:'0',//省级默认    
            provinces:[
                {addressId:0,cityName:'请选择省'}
            ],//地址省级
            cityId:'0',//市级默认
            citys:[
                {addressId:0,cityName:'请选择市'}
            ],
            countyId:'0',//市级默认
            countys:[
                {addressId:0,cityName:'请选择县/区'}
            ],
        }
    },
    mounted: function (){
        this.getAddress(1);//获取所有的省份城市
    },
    methods:{
        getUserInfoByaccountUidAndName:function(){
            var Uidregix=/^[\d]{18}$/;//身份证
             var data=Qs.stringify({
                "uName":this.uName,
                "uId":this.uId
            });
            if(!this.uId.match(Uidregix)||this.uName.trim()==''){
                this.$message.error('账户名不能为空，且身份证必须为18位');
                return false;
            }else{
                this.$axios
                .post('/bk-user/getUserInfoByUidAndName',data,
                    {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
                )
                .then(result => {
                    if(result.data.code==200){
                        this.visiable=true;
                        this.tableData=[];
                        for(var i=0;i<result.data.data[0].cardInfoList.length;i++){
                            if(result.data.data[0].cardInfoList[i].cardLock==0){
                                result.data.data[0].cardInfoList[i].cardLock='正常';
                            }else if(result.data.data[0].cardInfoList[i].cardLock==1){ 
                                result.data.data[0].cardInfoList[i].cardLock='已冻结';
                            }
                            this.tableData.push(
                                result.data.data[0].cardInfoList[i]
                            );
                        }
                        this.userInfo=result.data.data[0].userInfo;
                        console.log(result.data);
                        console.log(this.userInfo);
                    }else{
                        this.$message.error(result.data.message);
                    }
                    
                })
                .catch(failResponse => {})
            } 
        },
        onSubmit() {
            console.log('submit!');
        },
        getAddress: function(level){//获取省
            this.$axios
            .get('/bk-user/getAddressByLevel/'+level,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                //直接获取省的字段
                for(var i=0;i<result.data.data.length;i++){
                    this.provinces.push(
                        result.data.data[i]
                    );
                }
                
            })
            .catch(failResponse => {})
        },
        getTwoAddressByParentId: function(ParentId,level){//根据select来变换二级城市
            this.$axios
            .get('/bk-user/getAddressByParentId/'+ParentId,
                  {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
            )
            .then(result => {
                //直接获取市的字段
                if("1"===level){
                    this.citys=[{addressId:0,cityName:'请选择市'}];//清空select框防止叠加城市
                    this.cityId=0;
                    this.countys=[{addressId:0,cityName:'请选择县'}];//清空select框防止叠加城市
                    this.countyId=0;
                    for(var i=0;i<result.data.data.length;i++){
                        this.citys.push(
                            result.data.data[i]
                        );
                    }
                }else if("2"===level){
                    this.countys=[{addressId:0,cityName:'请选择县'}];//清空select框防止叠加城市
                    this.countyId=0;
                    for(var i=0;i<result.data.data.length;i++){
                        this.countys.push(
                            result.data.data[i]
                        );
                    }
                }
                
                
            })
            .catch(failResponse => {})
        },
    },
}
</script>
<style>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
        height: 400px;
    }

    .el-form-item__content{
        position: inherit;
    }
    #province,#city,#county{
        width:50%;
        margin:2px;
    }
</style>
